@use 'styles/helpers' as *;

.wrapper {
  position: fixed;
  z-index: 100;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  background-color: rgba(#000000, 0.3);
  transition: visibility .3s, opacity .3s, transform .3s;
  //
  // display: flex;
  // justify-content: center;
  // align-items: center;
  padding: 100px;
  &.visible {
    visibility: visible;
    opacity: 1;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

.container {
  padding: 20px;
  padding-top: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 100%);
  visibility: hidden;
  opacity: 0;
  // transform: translateY(100%);
  transition: visibility .3s, opacity .3s, transform .3s;
  //
  min-height: 300px;
  width: 450px;
  height: 500px; //800
  &.visible {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  @include m {
    width: 100%;
    height: 100%;
    // padding: 10px;
    // padding-top: 20px;
  }
}

.close {
  position: absolute;
  top: 12px;
  right: 12px;
}